<template>
  <div class="content">
    <div class="content-head">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add_btn">添加</el-button>
    </div>
    <div class="content-table">
        <el-table :data="tableData" border style="width: 100%" max-height="400">
            <el-table-column prop="lineName" label="产线名称" width=""></el-table-column>
            <el-table-column prop="lineCode" label="产线编码" width=""></el-table-column>
            <el-table-column prop="lineIp" label="rpaIp(散配件采集)" width=""></el-table-column>
            <el-table-column prop="lineIp2" label="rpaIp2(包装采集)" width=""></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row, $index}">
                    <el-button type="primary" size="mini" @click="tab_edit_btn(row)" style="margin-right:10px;">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" @onConfirm="pop_confirm_btn(row)">
                        <el-button slot="reference" type="info" size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="content-pagination">
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="prev, pager, next, total, sizes, jumper" :total="total" background></el-pagination>
    </div>
    <!-- dialog -->
    <el-dialog :title="dialogState" :visible.sync="dialogFormVisible" width="40%" :show-close="false" @close="dialogForm_cancel">
        <el-form :model="dialogForm" label-width="150px">
            <el-form-item label="产线名称">
                <el-input v-model="dialogForm.lineName" style="width:20vw;" placeholder="请输入产线名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="产线编码">
                <el-input v-model="dialogForm.lineCode" style="width:20vw;" placeholder="请输入产线编码" size="small"></el-input>
            </el-form-item>
            <el-form-item label="RPAIP(散配件采集)">
                <el-input v-model="dialogForm.lineIp" style="width:20vw;" placeholder="请输入RPAIP，例：192.168.1.1" size="small"></el-input>
            </el-form-item>
            <el-form-item label="RPAIP2(包装采集)">
                <el-input v-model="dialogForm.lineIp2" style="width:20vw;" placeholder="请输入RPAIP2(非必填)，例：172.10.1.1" size="small"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm_cancel">取 消</el-button>
            <el-button type="primary" @click="dialogForm_confirm">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqProductionIPBindsList, reqSaveProductionIPBinds, reqUpdateProductionIPBinds, reqDeleteProductionIPBinds } from "@/api/project.js";
export default {
  name: "rpaTable",
  data(){
    return {
        tableData:[],
        dialogFormVisible:false,  //dialog弹出框
        dialogState:"",  //更新 or 修改
        //dialog表单
        dialogForm:{
            lineName:"",
            lineCode:"",
            lineIp:"",
            lineIp2:"",
            id:""
        },
        currentPage:1,
        pageSize:10,
        total:0,
    }
  },
  mounted(){
    this.getTableList();
  },
  methods: {
    //分页获取当前列表数据
    async getTableList(){
        let res = await reqProductionIPBindsList (this.currentPage, this.pageSize);
        if(res.data.code === 200){
            let list = res.data.data.content.map(item => {
                return {id:item.id,lineCode:item.lineCode,lineIp:item.lineIp,lineIp2:item.lineIp2,lineName:item.lineName};
            });
            this.tableData = list;
            this.total = res.data.data.totalElements;
            //this.$message({type:"success",message:"产线列表数据获取成功!"});
        } else {
            this.$message({type:"error",message:"产线列表数据获取失败!"});
        }
        console.log("获取列表页面数据",res);
    },
    //新增产线编码ip
    async addProductionIPBinds (){
        if(this.dialogForm.lineCode === "" || this.dialogForm.lineIp === "" || this.dialogForm.lineName === "") {
            this.$message({type:"warning",message:"请将必填项内容填写完整!"});
        }
        let res = await reqSaveProductionIPBinds(this.dialogForm.lineCode,this.dialogForm.lineIp,this.dialogForm.lineIp2,this.dialogForm.lineName);
        if(res.data.code === 200){
            this.$message({type:"success",message:"新增成功!"});
            this.dialogFormVisible = false;
            this.dialogForm.lineCode = "";
            this.dialogForm.lineIp = "";
            this.dialogForm.lineIp2 = "";
            this.dialogForm.lineName = "";
            this.dialogState = "";
            //重新获取数据
            this.getTableList();
        } else {
            this.$message({type:"error",message:"添加失败,请重试!"});
        }
        console.log("新增产线api",res);
    },
    //修改产线编码ip
    async updateProductionIPBinds (){
        if(this.dialogForm.lineCode === "" || this.dialogForm.lineIp === "" || this.dialogForm.lineName === "" || this.dialogForm.id === "") {
            this.$message({type:"warning",message:"请将必填项内容填写完整!"});
            return;
        }
        const paramsObj = {
            id:this.dialogForm.id,
            lineName:this.dialogForm.lineName,
            lineIp:this.dialogForm.lineIp,
            lineIp2:this.dialogForm.lineIp2,
            lineCode:this.dialogForm.lineCode
        }
        let res = await reqUpdateProductionIPBinds(paramsObj);
        if(res.data.code === 200){
            this.$message({type:"success",message:"更新成功!"});
            this.dialogFormVisible = false;
            this.dialogForm.lineCode = "";
            this.dialogForm.lineIp = "";
            this.dialogForm.lineIp2 = "";
            this.dialogForm.lineName = "";
            this.dialogState = "";
            //更新数据
            this.getTableList();
        } else {
            this.$message({type:"success",message:"更新失败!"});
        }
        console.log('修改产线api',res);
    },
    //添加按钮
    add_btn(){
        this.dialogFormVisible = true;
        this.dialogState = "新增产线编码";
    },
    //dialog取消按钮
    dialogForm_cancel(){
        this.dialogFormVisible = false;
        this.dialogState = "";
        this.dialogForm.lineName = "";
        this.dialogForm.lineCode = "";
        this.dialogForm.lineIp = "";
        this.dialogForm.lineIp2 = "";
        this.dialogForm.id = "";
    },
    dialogForm_confirm(){
        console.log(this.dialogState);
        if(this.dialogState === "新增产线编码"){
            this.addProductionIPBinds();
        } else if(this.dialogState === "修改产线编码"){
            this.updateProductionIPBinds();
        }      
    },
    //表格中的编辑和删除按钮
    tab_edit_btn(row) {
        this.dialogState = "修改产线编码";
        this.dialogFormVisible = true;
        this.dialogForm.lineName = row.lineName;
        this.dialogForm.lineCode = row.lineCode;
        this.dialogForm.lineIp = row.lineIp;
        this.dialogForm.lineIp2 = row.lineIp2;
        this.dialogForm.id = row.id;
    },
    //pop气泡消息 删除 的确定和取消按钮
    async pop_confirm_btn(row){
       let res = await reqDeleteProductionIPBinds(row.id);
       if(res.data.code === 200){
        this.$message({type:"success",message:"删除成功!"});
        this.getTableList();
       } else {
        this.$message({type:"warning",message:"删除失败,请重试!"});
       }
       console.log('删除产线编号',res);
    },
    handleSizeChange(val){
        this.pageSize = val;
        this.getTableList();
    },
    handleCurrentChange(val){
        this.currentPage = val;
        this.getTableList();
    }
  },
};
</script>

<style lang='scss' scoped>
.content{
    width: 100%;
    height: 100%;
    padding: 2vh 2vw;
    box-sizing: border-box;

    .content-head{
        margin: 2vh 0;
    }
    .content-pagination{
        margin: 2vh 0;
    }
}
</style>